<template>
  <div>
    <div class="base-header-wrap"></div>
    <header class="header" :class="theme">
      <slot name="left">
        <a href="javascript:" class="base-header-left" @click="go()">
          <i class="uicon uicon-back"></i>
        </a>
      </slot>
      <slot name="name">
        <span :class="[this.className ? 'titgray' : 'tit']">{{this.name}}</span>
      </slot>
      <slot name="right">
        <a
          href="javascript:"
          class="show-add"
          :class="[showAdd ? 'show' : 'hide']"
          @click="addDockingPeople"
        >
          <i class="add-v"></i>
          <i class="add-h"></i>
        </a>
      </slot>
    </header>
  </div>
</template>
<script>
//记录上一个页面的地址
let ROUTE_FROM;

export default {
  props: ["name", "showAdd", "className", "theme", "back"],

  methods: {
    go() {
      if (this.back) {
        //为true，则丢给页面处理
        this.$emit("back");
      } else {
        // if (context.from.name !== "good-detail") {
        //     //有上一页
        //     app.router.back();
        //   } else {
        //     redirect("/");
        //   }
        this.$router.go(-1);
      }
    },
    addDockingPeople() {
      this.$router.push({ path: "/AddDockingPeople" });
    }
  }
};
</script>
<style lang="less" scoped>
.base-header-wrap {
  height: @app-header-height;
}
header {
  width: 100%;
  height: @app-header-height;
  text-align: center;
  position: fixed;
  line-height: @app-header-height;
  left: 0;
  top: 0;
  z-index: 1000;
  background: #fff;
  &.white {
    background-color: #2086f9;
    .uicon {
      background-image: url("../../assets/img/back_white.png");
    }
    span {
      color: #fff;
    }
  }
  .base-header-left {
    position: absolute;
    left: 0;
    top: 28px;
    padding: 0 30px;
    i {
      background: url("../../assets/img/black_blue.png") no-repeat left center;
      background-size: 21px 38px;
      width: 38px;
      height: 38px;
      display: block;
    }
  }
  span {
    font-size: 36px;
    line-height: @app-header-height;
    text-align: center;
    width: 100%;
  }
  a.show-add {
    position: absolute;
    right: 30px;
    margin-top: 26px;
    width: 36px;
    height: 36px;
    i {
      position: absolute;
      display: block;
      background-color: #2086f9;
    }
    i.add-v {
      width: 36px;
      height: 4px;
      margin-top: 16px;
    }
    i.add-h {
      width: 4px;
      height: 36px;
      margin-left: 16px;
    }
  }
  a.show-add.hide {
    display: none;
  }
}
</style>
